<template>
	<view class="box-content">
		<view class="time-content">
			<view class="days-list">
				<view :class="day == item.day?'every-day every-day-select':'every-day' " @click="chooseDay(item)"
					v-for="(item,index) in datesList" :key="index">
					<view class="week">{{item.week}}</view>
					<view class="date">{{item.time}}</view>
					<!-- <image class="xia-icon" v-if="day == item.day" src="https://qiniu-cdn.maeiyun.com/imgs/massage/xia.png" mode=""></image> -->
				</view>
			</view>
		</view>
		<view :class="iszhan?'time-list expanded':'time-list'">
			<view :class="iszhan?'out-time-list expanded':'out-time-list'">
				<view :class="iszhan?'time-inner-content expanded':'time-inner-content'">
					<view :class="item.status?time == item.time?'time time-select':'time':'time time-nochoose'"
						@click="item.status?chooseTime(item):''" v-for="(item,index) in timeList" :key="index">
						{{item.time}}
						<view v-if="item.is_night" class="night-text">夜间</view>
					</view>
				</view>
				<view class="shou-icon" @click.stop="iszhan = !iszhan">
					<uni-icons v-if="iszhan" color="#959595" type="up" size="18"></uni-icons>
					<uni-icons v-else color="#959595" type="down" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="fixed-bottom">
			<view class="technician-info">
				<view class="title">
					<view class="titls-lines">
						<view class="lines"></view>
						<view>可选服务人员</view>
					</view>
					<view class="all-text" @click="tosearch">全部</view>
				</view>
				<scroll-view scroll-x @scrolltolower="getMassageList">
					<!-- <view class="technician technician-select" v-if="!isShowList">
						<image class="technician-img" :src="selectiveTechnician.work_clothes_image" mode=""></image>
						<view class="right-technician-info">
							<view class="user-name">{{selectiveTechnician.real_name}}</view>
							<view class="age-address">
								<view style="margin-right: 10rpx;">{{selectiveTechnician.age}}</view>
								<view>{{selectiveTechnician.city}}</view>
							</view>
							<view class="distance">
								<image :src="$util.imgurl('/imgs/massage/address.png')" mode=""></image>
								<view>{{selectiveTechnician.juli}}km</view>
							</view>
						</view>
					</view> -->
					<view class="technician-list">
						<view :class="selectiveTechnician.id == item.id?'technician technician-select':'technician'"
							@click="selectiveTechnicianFn(item)" v-for="(item,index) in massageList" :key="index">
							<image class="technician-img" :src="item.work_clothes_image" mode="aspectFill"></image>
							<view class="right-technician-info">
								<view class="user-name">{{item.technician_nickname || item.real_name}}</view>
								<view class="age-address">
									<view style="margin-right: 10rpx;">{{item.age}}</view>
									<view>{{item.city}}</view>
								</view>
								<view class="distance">
									<image v-if="selectiveTechnician.id == item.id"
										:src="$util.imgurl('/imgs/massage/address.png')" mode=""></image>
									<image v-else :src="$util.imgurl('/imgs/massage/noselelct.png')" mode=""></image>
									<view style="margin-left: 10rpx;">{{(item.juli/1000).toFixed(2)}}km</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="huan-content" @click="choosePeople" v-if="!isShowList">
						<image :src="$util.imgurl('/imgs/massage/huan.png')" mode=""></image>
						<view>重新选人</view>
					</view> -->
				</scroll-view>


			</view>
			<view class="hint-text">
				实际到达时间可能会有30分钟浮动
			</view>
		</view>
		<view class="fixed-btn" @click="affirm">
			<view>确认选择</view>
		</view>
	</view>
</template>
<script>
	import publicData from './public.js'
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			}),
		},
		data() {
			return {
				datesList: [],
				day: 0,
				timeList: [],
				timedata: "",
				id: "", //服务id
				time: "",
				serviceStaff: {},
				selectiveTechnician: {},
				massageList: [],
				isShowList: false, //重新选人列表
				technician_id: 0,
				iszhan: false,
				page: 1,
				last_page: 10,
				alldate: "今天",
				lat: "",
				lng: ""
			};
		},
		onLoad(option) {
			var that = this
			this.id = option.id
			this.technician_id = option.technician_id
			this.lat = option.lat ? option.lat : ''
			this.lng = option.lng ? option.lng : ''
			for (var i = 0; i < 5; i++) {
				this.datesList[i] = {}
				this.datesList[i].time = this.getDates(i).day
				this.datesList[i].day = i
				if (i == 0) {
					this.datesList[i].week = '今天'
				} else {
					this.datesList[i].week = this.getWeek(this.getDates(i).year)
				}
			}
			this.selectiveTechnician = publicData.selectiveTechnician
			this.time = publicData.selectiveTime.time
			this.day = publicData.selectiveTime.day
			this.alldate = publicData.selectiveTime.alldate
			this.getMassageList()
			let time = new Date()
			let hour = time.getHours()
			let min = time.getMinutes()
			if(hour >= 23 && min>=30){
				this.datesList.shift()
			}
			this.getTimes(0)
		},
		onShow() {
			this.selectiveTechnician = getApp().globalData.selectiveTechnician
			this.isShowList = false
		},
		methods: {
			getDates(dates) {
				var dd = new Date();
				var n = dates || 0;
				dd.setDate(dd.getDate() + n);
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1;
				var d = dd.getDate();
				m = m < 10 ? "0" + m : m;
				d = d < 10 ? "0" + d : d;
				var year = y + '-' + m + "-" + d;
				var day = m + "-" + d;
				var obj = {
					day: day,
					year: year
				}
				return obj;
			},
			getWeek(day) {
				var week = new Date(day)
				var day = week.getDay()
				var weekdata = ''
				switch (day) {
					case 0:
						weekdata = "星期日";
						break;
					case 1:
						weekdata = "星期一";
						break;
					case 2:
						weekdata = "星期二";
						break;
					case 3:
						weekdata = "星期三";
						break;
					case 4:
						weekdata = "星期四";
						break;
					case 5:
						weekdata = "星期五";
						break;
					case 6:
						weekdata = "星期六";
						break;
				}
				return weekdata
			},
			affirm() {
				let data = {
					day: this.day,
					time: this.time,
					week: this.datesList[this.day].week,
					alldate: this.alldate
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				// #ifdef APP
				prevPage.$vm.showtime = false
				prevPage.$vm.selectiveTime = data
				prevPage.$vm.selectiveTechnician = this.selectiveTechnician
				// #endif
				// #ifndef APP
				prevPage.showtime = false
				prevPage.selectiveTime = data
				prevPage.selectiveTechnician = this.selectiveTechnician
				// #endif
				publicData.selectiveTime = data
				publicData.selectiveTechnician = this.selectiveTechnician
				uni.navigateBack({})

			},
			chooseTime(item) {
				this.time = item.time
				this.isShowList = false
				this.page = 1
				this.massageList = []
				this.getMassageList()
			},
			selectiveTechnicianFn(item) { //选择技师
				this.selectiveTechnician = item
				this.getTimes()
			},
			getDate(dates) {
				var dd = new Date();
				var n = dates || 0;
				dd.setDate(dd.getDate() + n);
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1;
				var d = dd.getDate();
				m = m < 10 ? "0" + m : m;
				d = d < 10 ? "0" + d : d;
				var day = m + "-" + d;
				return day;
			},
			choosePeople() {
				this.isShowList = true
				this.getMassageList()
			},
			chooseDay(item) {
				this.day = item.day
				this.alldate = item.time
				this.getTimes(1)
				this.iszhan = false
				this.isShowList = false
				this.page = 1
				this.massageList = []
				this.getMassageList()
			},
			getMassageList() {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					technician_id: this.selectiveTechnician.id,
					service_id: this.id,
					day: this.day,
					time: this.time,
					page: this.page,
					lng: this.lng ? this.lng : this.userLocation.longitude, //
					lat: this.lat ? this.lat : this.userLocation.latitude,
				}).then(res => {
					if (res.code == 0) {
						that.last_page = res.data.last_page
						that.massageList = [...that.massageList, ...res.data.data]
						that.selectiveTechnician = that.massageList[0]
						that.page++
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getTimes(type) {
				var that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianWorkTime",
					method: "get"
				}, {
					technician_id: this.selectiveTechnician.id,
					day: this.day
				}).then(function(data) {
					if (data.code == 0) {
						that.timeList = data.data
						if (type == 1) {
							for (let i = 0; i < data.data.length; i++) {
								if (data.data[i].status) { // 这里的 condition 为某种特定条件
									that.time = data.data[i].time
									break; // 如果满足条件则跳出循环
								}
							}
						} else {}
						// that.$emit('optimalTime', data.data[0])
					} else {

					}
				})
			},
			tosearch() {
				uni.redirectTo({
					url: '/otherpages/search/searchDetail?type=0&id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	//
	.time-content {
		// overflow: hidden;
		// overflow-x: scroll;
		padding: 0 30rpx;

		// padding-top: var(--status-bar-height);
		.days-list {
			display: flex;
			align-items: center;
			// overflow-x: auto;
			justify-content: space-between;

			.every-day {
				padding: 0 20rpx;
				flex: 0 0 auto;
				text-align: center;
				position: relative;

				.week {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #08090A;
				}

				.date {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #08090A;
				}

				.xia-icon {
					position: absolute;
					left: 42%;
					bottom: -24rpx;
					width: 23rpx;
					height: 31rpx;
					z-index: 1000;
				}

			}

			.every-day-select {
				color: #EF5233;

				.week {
					color: #EF5233;
				}

				.date {
					color: #EF5233;
				}
			}
		}
	}

	.time-list {
		margin-top: 11rpx;

		.out-time-list {
			background-color: #FFFFFF;
			height: 230rpx;
			border-radius: 10rpx;

			.shou-icon {
				width: 40rpx;
				height: 40rpx;
				color: #EF5233;
				font-size: 40rpx;
				z-index: 100;
				display: block;
				margin: 0 auto;
				line-height: 40rpx;

				text {
					width: 37rpx;
					height: 37rpx;
				}
			}
		}

		.time-inner-content {
			box-sizing: border-box;
			background-color: #FFFFFF;
			padding: 32rpx 30rpx 0 10rpx;
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 100rpx);
			grid-gap: 0 25rpx;
			position: relative;
			transition: height 1s ease-in-out;
			overflow: hidden;
			height: 180rpx;
			border-radius: 10rpx;

			.time {
				width: 106rpx;
				flex: 0 0 106rpx;
				height: 60rpx;
				border-radius: 29rpx;
				border: 1rpx solid #D7D7D7;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #545454;
				line-height: 60rpx;
				text-align: center;
				margin: 0 8rpx;
				margin-bottom: 20rpx;
				position: relative;

				.night-text {
					width: 43rpx;
					height: 23rpx;
					background: #545454;
					border-radius: 11rpx;
					font-size: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFD359;
					text-align: center;
					position: absolute;
					top: -10rpx;
					right: 0;
					line-height: 23rpx;
				}
			}

			.time-select {
				border: 1rpx solid #EF5233;
				color: #FFF;
				background: #EF5233;
			}

			.time-nochoose {
				border: 1rpx solid #D7D7D7;
				color: #fff;
				background-color: #D7D7D7;
			}
		}

		.expanded {
			height: auto !important;
		}
	}

	//
	.fixed-bottom {
		margin-top: 15rpx;
	}

	//
	.technician-info {
		background-color: #fff;
		padding: 30rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.titls-lines {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #08090A;

				.lines {
					width: 10rpx;
					height: 30rpx;
					background: linear-gradient(180deg, #F19A02 0%, #E7533F 100%);
					border-radius: 5rpx;
					margin-right: 10rpx;
				}
			}

			.all-text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8B8B8D;
			}

		}
	}

	.technician-list {
		display: flex;
		align-items: center;
		// flex-wrap: nowrap;
		// overflow-x: scroll;
	}

	.technician {
		height: 139rpx;
		box-sizing: border-box;
		width: fit-content;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background-color: #F5F6F7;
		margin-right: 20rpx;
		flex: 0 0 auto;

		.technician-img {
			width: 80rpx;
			height: 100rpx;
			flex: 0 0 auto;
		}

		.right-technician-info {
			flex: 0 0 auto;
			margin-left: 20rpx;

			.user-name {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333;
			}

			.age-address {
				display: flex;
				align-items: center;
				margin: 10rpx 0;

				view {
					background: #E4E5E6;
					height: 26rpx;
					border-radius: 6rpx;
					padding: 0 8rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #8B8D8D;
					line-height: 26rpx;

				}
			}

			.distance {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8B8D8D;
				display: flex;
				align-items: center;

				image {
					width: 13rpx;
					height: 16rpx;
				}
			}

		}
	}

	.technician-select {
		background: rgba(239, 82, 51, 0.1);
		border-radius: 14rpx;
		border: 1rpx solid #EF5233;
		color: #EF5233;

		.user-name {
			color: #EF5233 !important;
		}

		.age-address {
			view {
				color: #EF5233 !important;
				background: rgba(239, 82, 51, 0.2) !important;

			}
		}

		.distance {
			color: #EF5233 !important;
		}
	}

	//
	.huan-content {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #0F0807;
		width: 170rpx;
		height: 139rpx;
		background: #F5F6F7;
		border-radius: 14rpx;
		text-align: center;
		padding-top: 29rpx;

		image {
			width: 39rpx;
			height: 40rpx;

		}
	}

	//
	.hint-text {
		width: 388rpx;
		height: 36rpx;
		// background: #D8D8D8;
		border-radius: 18rpx;
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #868686;
		text-align: center;
		line-height: 36rpx;
		margin: 20rpx auto 39rpx auto;
	}

	//
	.fixed-btn {
		height: 120rpx;
		background: #FEFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		view {
			width: 690rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 16rpx auto;
		}

	}
</style>